<template>
	<div  class='main_bg'> 
		<div  class='main'>
			<div class='introduce pd30  mt50'>
				<div class=' bg-white pd30'>
					<p>
						<label>{{AllData.address.title}} </label>
						<span>{{AllData.address.content}}</span>
					</p>
					<p> 
						<label>{{AllData.phone.title}}</label>
						<span>{{AllData.phone.content}}</span>
					</p>
					<p>
						<label>{{AllData.email.title}}</label>
						<span>{{AllData.email.content}}</span>
					</p>
					<p>
						<label>{{AllData.fax.title}}</label>
						<span>{{AllData.fax.content}}</span>
					</p>
					<p>
						<label>{{AllData.traffic.title}}</label>
						<i v-for='(item,index) in AllData.traffic.content' :key='index'>{{item}}<br></i>
					</p>
				</div>
			</div>
			<div class="pull-left map-contain  mt50" id="dituContent" style="height:300px;width: 100%;" ></div>
			
			<div class='mt50  text-center'> 
				<button  class='method_button'><router-link  to='/contact_form'>{{AllData.btn}}</router-link ></button>
			</div>
		</div>
	</div>
</template>

<script >
	import BMap from 'BMap'
export default {
	name:'contact',
	props:{
		language:Object
	},
	data(){
		return {

		}
	},
	methods:{  
	    changeD(){
	    	
	    }
	},
	mounted: function () {
		    
		    //创建和初始化地图函数：
		    function initMap(){
		        createMap();//创建地图
		        setMapEvent();//设置地图事件
		        addMapControl();//向地图添加控件
		        addMarker();//向地图中添加marker
		    }
		    
		    //创建地图函数：
		    function createMap(){  
		        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
		        var point = new BMap.Point(120.239085,30.272948);//定义一个中心点坐标  120.220826,30.259551
		        //console.log(point)
		        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
		        
		        window.map = map;//将map变量存储在全局
		         var marker = new BMap.Marker(point);  // 创建标注
		        map.addOverlay(marker);              // 将标注添加到地图中
		    }
		    
		    //地图事件设置函数：
		    function setMapEvent(){

		        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		        // map.enableScrollWheelZoom();//启用地图滚轮放大缩小/
		        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		        map.enableKeyboard();//启用键盘上下左右键移动地图
		    }
		    
		    //地图控件添加函数：
		    function addMapControl(){
		        //向地图中添加缩放控件
		        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		        map.addControl(ctrl_nav);
		                      //向地图中添加比例尺控件
		        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		        setTimeout(function(){
		          map.addControl(ctrl_sca);
		        },1000)
		    }
		        
		    //标注点数组
		    var markerArr = [{title:this.AllData.companyName,content:this.AllData.address.content,point:"120.239085|30.272948",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
		     ];  /*120.141647|30.298452*/
		    //创建marker
		    function addMarker(){
		        for(var i=0;i<markerArr.length;i++){
		            var json = markerArr[i];
		            var p0 = json.point.split("|")[0];
		            var p1 = json.point.split("|")[1];
		            var point = new BMap.Point(p0,p1);
		            var iconImg = createIcon(json.icon);
		                  var marker = new BMap.Marker(point,{icon:iconImg});
		            var iw = createInfoWindow(i);
		            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
		            marker.setLabel(label);
		                  map.addOverlay(marker);
		                  label.setStyle({
		                              borderColor:"#808080",
		                              color:"#333",
		                              cursor:"pointer"
		                  });
		                
		            (function(){
		              var index = i;
		              var _iw = createInfoWindow(i);
		              var _marker = marker;
		              _marker.addEventListener("click",function(){
		                  this.openInfoWindow(_iw);
		                });
		                _iw.addEventListener("open",function(){
		                  _marker.getLabel().hide();
		                })
		                _iw.addEventListener("close",function(){
		                  _marker.getLabel().show();
		                })
		              label.addEventListener("click",function(){
		                  _marker.openInfoWindow(_iw);
		                })
		              if(!!json.isOpen){
		                label.hide();
		                _marker.openInfoWindow(_iw);
		              }
		            })()
		        }
		    }
		    //创建InfoWindow
		    function createInfoWindow(i){
		        var json = markerArr[i];
		        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
		        return iw;
		    }
		    //创建一个Icon
		    function createIcon(json){
		        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
		        return icon;
		    }
		        
		    initMap();//创建和初始化地图
	},
	computed:{ 
		AllData(){
			return this.language.contact
		}
	},
}
</script>

<style  scoped="scoped"> 

.main_bg{padding:300px 0 50px;background: url(../assets/img/contact_bg.jpg) no-repeat  top  center;} 
.main{width: 1200px; margin:0 auto;}

.main .introduce{width: 1068px;padding:50px 0 0 400px;background: url(../assets/img/contact_bg2.jpg) no-repeat top left;}
.introduce p{display: table;line-height: 2}
.introduce label,span{display: table-cell;}
.introduce label{font-size: 18px;color: #2E4E7E;font-weight: 600;width: 100px;}

/*移动端适配*/
@media(max-width: 420px){   
	.main{width: 100%;padding: 20px ;} 
	.main .introduce{padding:0;background: none;margin-top: 0;width: 100%;}
}
</style>